<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Chapter 1: Young and Useless</title>

<link rel="shortcut icon" href="images/2reading.gif">
<link href="foti.css" rel="stylesheet" type="text/css">

<style type="text/css">

#canvas {
	margin: 10px auto 0 auto;
	border: 5px double #aa9e8c;
}

#bg, #char {display: none;}



</style>

<script type="text/javascript">
var vc, vctx, vi1, bgr;
	function init(){
		vc = document.getElementById("canvas");
		vctx = vc.getContext("2d");
		bgr = document.getElementById("bg");
		vctx.drawImage(bgr,0,0,800,600);
		vi1 = document.getElementById("char");
		setInterval("animation()",1100);		
	}
	
	var dax=0; counter=0;
	function animation(){
		if(counter >= 2) counter = 0; else counter++;
		vctx.drawImage(bgr,0,0,800,600);
		vctx.drawImage(vi1,dax,0,800,600,0,0,800,600);
		dax=800*counter;
		
	}
</script>

</head>

<body onload="init()">

	<h1>Figment of the Imagination</h1>
	<h2>Chapter 1: Young and Useless</h2>
	<h2>Alternate Scene 4: Girl's Talk</h2>


<center><img src="images/line divider.png" width=800 style="opacity: .7;"></center>

<div id="content">

<center><canvas id="canvas" width=800 height=600></canvas></center>
<img id="bg" src="images/ch4/bgiphone.png" width=800 height=600>
<img id="char" src="images/ch1/1scene3.png">

<center><img src="images/photo.png" width=800 style="margin:-4px 0 0 0;"></center>

<div id="scenetext">
<p>
Ada set the alarm clock of her phone to 6:30 am. 
She visited her social sites for the last time this night when one of her friends messaged her. 
“Ada! Did you see John at his practice? Gosh!” Her friend exclaimed. 
“Of course! He waved back at me. He’s such a hottie.” Ada replied. 
The conversation went on. Unconsciously, Ada felt asleep.
</p>

<center><img src="images/line divider.png" width=800 style="opacity: .7;"></center>
	
</div>

<div align="center" style="padding-bottom: 30px;">
<a href="Chapter1Scene3.jsp" title="Starry Starry Night"><button id="button">BACK</button></a>
<a href="tableofcontent.jsp" title="Back to Table of Contents"><button id="button2">TABLE OF CONTENTS</button></a>
<a href="Chapter2.jsp" title="Proceed to Chapter 2"><button id="button">NEXT</button></a>
</div>

</div>


</body>
</html>

